<!-- 2019JHBDL:
傻福 edge F12

2019JHBDL:
触控模拟和手机根本不一样

2019JHBDL:
ff就可以模拟

2019JHBDL:
我还找了半天原因 -->

<!-- 测试测试测试 -->

<template>
    <div class="wrapper">
        <div ref="chartRef" class="chart" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
        </div>
        <p class="tip">在手机或触屏设备上用双指缩放、拖动地图以验证原生手势支持</p>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts/core'
import { MapChart } from 'echarts/charts'
import { VisualMapComponent, GeoComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
// 把单个 Touch 对象转成 MouseEventInit
function touch2MouseInit(touch) {
    console.log('touch2MouseInit', touch);

    return {
        "cancelBubble"
            :
            false,
        "event"
            :
        {
            isTrusted: true,
            zrX: touch.clientX,
            zrY: touch.clientY,
            bubbles: true,
            cancelable: true,
            clientX: touch.clientX,
            clientY: touch.clientY,
            screenX: touch.screenX,
            screenY: touch.screenY,
            pageX: touch.pageX,
            pageY: touch.pageY,
            // 模拟鼠标主键
            button: 0,
            buttons: 1,
            ctrlKey: false,
            shiftKey: false,
            altKey: false,
            metaKey: false
        },
        "gestureEvent"
            :
            undefined,
        "offsetX"
            :
            485.54541015625,
        "offsetY"
            :
            212.2286376953125,
        "pinchScale"
            :
            undefined,
        "pinchX"
            :
            undefined,
        "pinchY"
            :
            undefined,
        "type"
            :
            "mouseup",
        "wheelDelta"
            :
            -0,
        "which"
            :
            1,
        "zrByTouch"
            :
            undefined
    };
}

function onTouchStart(e) {
    e.preventDefault(); // 阻断浏览器默认手势
    console.log('onTouchStart', e);
    
    const touch = e.changedTouches[0];
    // console.log('touch start', touch);

    // chart.getZr().trigger('mousedown', touch2MouseInit(touch));
}

function onTouchMove(e) {
    e.preventDefault();
    const touch = e.changedTouches[0];
}

function onTouchEnd(e) {
    e.preventDefault();
    const touch = e.changedTouches[0];
    const target = e.currentTarget;
    // chart.getZr().trigger('mouseup', touch2MouseInit(touch));
}
/* 1. 注册组件 */
echarts.use([MapChart, VisualMapComponent, GeoComponent, CanvasRenderer])

/* 2. 本地模拟数据（山东省最多） */
const provinceData = [
    { name: '山东省', value: 3250 },
    { name: '河南省', value: 980 },
    { name: '河北省', value: 750 },
    { name: '江苏省', value: 680 },
    { name: '安徽省', value: 620 },
    { name: '四川省', value: 580 },
    { name: '湖北省', value: 510 },
    { name: '湖南省', value: 490 },
    { name: '广东省', value: 450 },
    { name: '浙江省', value: 420 },
    { name: '江西省', value: 380 },
    { name: '福建省', value: 350 },
    { name: '山西省', value: 320 },
    { name: '陕西省', value: 300 },
    { name: '辽宁省', value: 280 },
    { name: '吉林省', value: 250 },
    { name: '黑龙江省', value: 230 },
    { name: '云南省', value: 200 },
    { name: '贵州省', value: 180 },
    { name: '广西壮族自治区', value: 160 },
    { name: '甘肃省', value: 150 },
    { name: '内蒙古自治区', value: 130 },
    { name: '新疆维吾尔自治区', value: 110 },
    { name: '北京市', value: 100 },
    { name: '天津市', value: 90 },
    { name: '上海市', value: 80 },
    { name: '重庆市', value: 70 },
    { name: '海南省', value: 60 },
    { name: '宁夏回族自治区', value: 40 },
    { name: '青海省', value: 30 },
    { name: '西藏自治区', value: 20 },
    { name: '香港特别行政区', value: 10 },
    { name: '澳门特别行政区', value: 5 },
    { name: '台湾省', value: 8 }
]

const chartRef = ref(null)

let chart = null;

onMounted(() => {
    chart = echarts.init(chartRef.value)

    /* 3. 绘制地图 */
    chart.setOption({
        tooltip: { trigger: 'item' },
        visualMap: {
            min: 0,
            max: 3500,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            inRange: { color: ['#e0f3f8', '#045a8d'] },
            calculable: true
        },
        geo: {
            map: 'china',
            roam: true,               // ← 开启手势：缩放 + 拖动
            scaleLimit: { min: 0.8, max: 5 }
        },
        series: [
            {
                name: '生源人数',
                type: 'map',
                geoIndex: 0,
                // data: provinceData
            }
        ]
    })

    /* 4. 自适应窗口 */
    window.addEventListener('resize', () => chart.resize())



    chart.getZr().on('mousedown', (params) => {
        console.log('mousedown', params);

    })

    chart.getZr().on('mousemove', (params) => {
        console.log('mousemove', params);

    })


    chart.getZr().on('click', (params) => {
        console.log('click', params);

    })

    let runing = false;

    chart.getZr().on('mouseup', (params) => {
        console.log('mouseup', params);
        // if (runing) return;
        // chart.getZr().trigger('mousedown', event);
        // runing = true;
        // // chart.getZr().trigger('mouseup', event);
        // runing = false;
    })


    // chart.getZr().trigger('mousedown', event);
    // chart.getZr().trigger('mouseup', event);

})
</script>

<style scoped>
.wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.chart {
    width: 100%;
    height: 80%;
    touch-action: none;
    /* 关键：让浏览器别插手 */
    overscroll-behavior: none;
    /* 可选：连锁回弹也干掉 */
    user-select: none;
    /* 防止长按选中文本 */
}

.tip {
    margin: 0;
    padding: 10px;
    font-size: 14px;
    color: #555;
}
</style>